<template>

<div class="chat-box">
    <a-card class="chat-card">
      <a-menu class="contacts-list"
              mode="inline" v-model:selectedKeys="TIMStore.selectedKeys" @click="selectMenu">
        <a-menu-item v-for="i in TIMStore.conversationLIst" :key="i.userProfile?.userID">{{i.userProfile?.userID}}</a-menu-item>
      </a-menu>
      <div class="chat-content">
        <div class="chat-message">
          <div :class="i.flow!=='in'?'chat-item-out':'chat-item'"
               v-for="(i,index) in chatLogs"
               :key="index">
            <div class="chat-item-content">
              {{ i.payload.text }}
            </div>
          </div>
        </div>
        <a-textarea placeholder="Press enter to send!" v-model:value="chatMessage"
                    :auto-size="{minRows:2,maxRows:6}"
                    class="textarea" @pressEnter="sendMsg"/>
      </div>
    </a-card>
  </div>

</template>

<script setup lang='ts'>
import { computed, onMounted, ref } from 'vue';
import { useTIMStore } from '../../store/chat';
import { TextMessage } from '../../store/plugins/TIM-plugin/type';

const TIMStore = useTIMStore()

const chatMessage = ref('')
const chatInfo = ref<TextMessage[]>([])
const chatLogs = computed<TextMessage[]>(()=>{
  return [
    ...TIMStore.historyMessage,
    ...chatInfo.value
  ]
})

const sendMsg = async() =>{
  console.log(chatMessage.value);
  await TIMStore.timCore.sendMessage(TIMStore.selectedKeys[0],{
    text:chatMessage.value
  })
  chatInfo.value.push({
    payload:{
      text:chatMessage.value
    },
    flow:'out',
    conversationID:TIMStore.selectedKeys.toString()
  })
  chatMessage.value = ''
}
const selectMenu = ({key}:{key:string}) => {
  chatInfo.value = []
  TIMStore.getMessageHistoryList(key)
}

TIMStore.timCore.onReady = () => {
  console.log('this?---------');
  TIMStore.getSessionList()
}
TIMStore.$onAction(({name,args})=>{
  if(name==='subscribeMessage'){
    chatInfo.value.push(...args[0].data)
  }
})
onMounted(async()=>{
  try{
    await TIMStore.getSessionList()
  }catch(err){
    console.log('登陆后使用！');
  }
})
</script>

<style scoped lang='scss'>
.chat-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .chat-card {
    width: 100%;
    height: 100%;
  }
  .contacts-list {
    height: 100% !important;
    width: 300px;
    border: 1px solid #f0f0f0;
    margin-right: 20px;
    margin-bottom: 360px;
  }
  :deep(.ant-card-body) {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .chat-content {
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    padding: 8px;
    height: 100%;
    flex: 1;
    .chat-message {
      flex: 1;
      padding: 20px 0px;
      overflow-y: auto;
      .chat-item {
        display: block;
        margin-right: 55%;
        margin-bottom: 5px;
        border-radius: 5px;
        padding-left: 25px;
        background-color: skyblue;
        text-align: left;
        line-height: 50px;
        color: white;
        word-break: break-all;
      }
      .chat-item-out {
        display: block;
        margin-left: 55%;
        margin-bottom: 5px;
        border-radius: 5px;
        padding-left: 25px;
        background-color: lightgreen;
        text-align: left;
        line-height: 50px;
        color: white;
        word-break: break-all;
      }
    }
    .textarea {
      border-radius: 5px;
    }
  }
}
</style>